<template>
	<view class="gy-empty">
        <com-image :src="proxy.utils.image.fullPath(images[props.type])" :width="props.iconSize" v-if="props.proxyImg" />
		<view class="gy-empty-tips" :style="[props.customStyle]">{{ text || tips[props.type] }}</view>
        <view class="gy-empty-slot">
            <slot>
            	<com-button v-if="props.showBtn" :btnIcon="props.btnIcon" :btnIconPosition="props.btnIconPosition" :btnText="btnText" @click="confirmFn" />
            </slot>
        </view>
	</view>
</template>

<script lang="ts" setup>

    import {
    	ref,
		getCurrentInstance
    } from "vue";

	const { proxy } : any = getCurrentInstance();

    const emits = defineEmits(["confirm"]);

    const props = defineProps({
    	type: {
    		type: String,
    		default: "default"
    	},
    	text: {
    		type: String
    	},
		iconSize: {
			type: Number,
			default: 380
		},
    	showBtn: {
    		type: Boolean,
    		default: false
    	},
		proxyImg: {
			type: Boolean,
			default: true
		},
    	btnText: {
    		type: String,
    		default: "按 钮"
    	},
        btnIcon: {
    		type: String,
    		default: ""
    	},
        btnIconPosition: {
    		type: String,
    		default: "left"
    	},
		customStyle: {
			type: Object,
			default: () => {}
		},
    });

    const images = ref({
		default: "337a6947fc03373377e020f9170c047b58f829830d29216630059c4dfe48dadf.png",
        address: "337a6947fc03373377e020f9170c047b58f829830d29216630059c4dfe48dadf.png",
        search: "337a6947fc03373377e020f9170c047b58f829830d29216630059c4dfe48dadf.png",
        collect: "337a6947fc03373377e020f9170c047b58f829830d29216630059c4dfe48dadf.png",
        coupon: "337a6947fc03373377e020f9170c047b58f829830d29216630059c4dfe48dadf.png",
        gift: "337a6947fc03373377e020f9170c047b58f829830d29216630059c4dfe48dadf.png",
        integral: "337a6947fc03373377e020f9170c047b58f829830d29216630059c4dfe48dadf.png",
        message: "337a6947fc03373377e020f9170c047b58f829830d29216630059c4dfe48dadf.png",
        news: "337a6947fc03373377e020f9170c047b58f829830d29216630059c4dfe48dadf.png",
        notice: "57083f76e7e891fa3ff519a20de6f450ac11333e4814a2945d18bbd381226a0f.png",
        order: "c288847a09af3c7f43c51b60ba61d3f14ef2f0d62ed5329a360bf2144213523e.png",
        network: "eaee7405679bd80eebedbc179e3b87cb5ad50ec23dcc1830c64bb34156dfea5d.png",
        footmark: "337a6947fc03373377e020f9170c047b58f829830d29216630059c4dfe48dadf.png",
        evaluate: "337a6947fc03373377e020f9170c047b58f829830d29216630059c4dfe48dadf.png"
    });

    const tips = ref({
		default: "暂无数据",
        address: "暂无地址",
        search: "没有搜索结果",
        collect: "暂无收藏",
        coupon: "暂无优惠卷",
        gift: "暂无礼品",
        integral: "暂无积分",
        message: "暂无消息",
        news: "暂无资讯",
        notice: "暂无通知",
        order: "暂无订单",
        network: "暂无网络",
        footmark: "暂无足迹",
        evaluate: "暂无评论"
    });

	function confirmFn(){
		emits('confirm');
	}

</script>

<style lang="scss" scoped>
	.gy-empty{
	    @include flex-center-center;
	    flex-direction: column;
	    padding: 50rpx 0 150rpx 0;
	    .gy-empty-tips{
	        font-size: var(--gy-font-size-medium);
	        color: var(--gy-text-color-placeholder);
	        text-align: center;
	        padding: 0 50rpx;
	    }
	    .gy-empty-slot{
	        margin-top: 50rpx;
	    }
	}
</style>
